import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import Detail from "./Detail";

class News extends Component {

    state = {
        news: [
            {id: 1, title: '中央网信办：建立负面清单 加强娱乐明星网上信息规范管理', date: '2021-11-23'},
            {id: 2, title: '人民网评：正确认识和把握共建“一带一路”面临的新形势', date: '2021-11-22'},
            {id: 3, title: '宁夏银川中小学幼儿园11月22日起陆续恢复线下教学', date: '2021-11-20'},
            {id: 4, title: '美青年枪杀2人被判无罪 有枪支零售商趁机大甩卖', date: '2021-11-21'},
        ]
    }

    render() {
        const news = this.state.news
        return (
            <div>
                <ul>
                    {
                        news.map((item) => {
                            return (
                                <li key={item.id}>
                                    {/* 不用高亮，使用普通Link */}

                                    {/* 向路由传递params参数 */}
                                    {/*<Link to={`/home/news/detail/${item.id}`}>{item.title} - {item.date}</Link>*/}

                                    {/* 向路由传递search参数 */}
                                    {/*<Link to={`/home/news/detail?id=${item.id}`}>{item.title} - {item.date}</Link>*/}

                                    {/* 向路由传递state参数 */}
                                    <Link to={{
                                        pathname: `/home/news/detail`,
                                        state: item,
                                        replace: true
                                    }}>{item.title} - {item.date}</Link>
                                </li>
                            )
                        })
                    }
                </ul>

                <hr/>

                <h3>消息详情</h3>
                {/* 声明接收params参数 id */}
                {/*<Route path='/home/news/detail/:id' component={Detail}/>*/}

                {/* 声明接收search参数 id */}
                {/*<Route path='/home/news/detail' component={Detail}/>*/}

                {/* 声明接收state参数 id */}
                <Route path='/home/news/detail' component={Detail}/>
            </div>
        );
    }
}

export default News;
